<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Layout demo</title>
    <style>
        /*绝对定位法 
        body{
            margin: 0;
        }
        .abs{
            position: absolute;
            top: 0;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .center{
            margin: 0 30%;
        }
        div{
            background-color: bisque;
        } */
        /* margin负值法 */
        /* html,body{
            margin:0;height: 100%;
        }
        #main{
            width:100%;height: 100%;float: left;
        }
        #main #body{
            margin: 0 210px;background:#ffe6b8;height: 100%;
        }
        #left,#right{
            width: 200px;height: 100%;float: left;background: #a0b3d6;
        }
        #left{
            margin-left: -100%;
        }
        #right{
            margin-left: -200px;
        } */
        /* 自身浮动法 */
        html,body{
            margin: 0;height: 100%;
        }
        #main{
            height: 100%;margin: 0 210px;background: #ffe6b8;
        }
        #left,#right{
            /* 相应地200px和210px都可以换成百分比 */
            width:200px;height: 100%;background: #a0b3d6;
        }
        #left{
            float: left;
        }
        #right{
            float:right;
        }
    </style>
</head>
<body>
    <!-- 绝对定位法，如果center有最小宽度限制，会产生层重叠 -->
    <!-- <div class="abs left">left div</div>
    <div class="center">center div  i am groot</div>
    <div class="abs right">rght div</div> -->

    <!-- margin负值法 -->
    <!-- <div id="main">
        <div id="body">body</div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div> -->

    <!-- 自身浮动法 -->
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="main">main</div>
</body>
</html>